<!--
 * @Author: tushan
 * @Date: 2022-02-26 14:49:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-05 21:59:03
 * @Description: 分页通用组件
-->

<template>
  <div class="paginate">
    <el-pagination v-model:currentPage="pn" v-model:page-size="ps" :page-sizes="page_sizes" :total="total" background
      class="mt-4 ml-3" layout="prev, pager, next,sizes,total,jumper" next-text="下一页" small @size-change="handleSizeChange"
      @current-change="handleCurrentChange"></el-pagination>
    <div class="right-tips mr-4">本页显示 {{ ps }}条记录，共{{ total }}条数据</div>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';

const props = defineProps({
  page: {},
});
const page_sizes = reactive([10, 20, 50]);
const ps = ref(props.page.per_page || 20);
const pn = ref(props.page.current_page || 1);
const total = ref(props.page.total || 0);
/**
 * @param {*} val
 * @Description: 改变页面展示数量
 */
const handleSizeChange = (val) => {
  refresh();
};
/**
 * @param {*} val
 * @Description: 改变页码
 */
const handleCurrentChange = (val) => {
  refresh();
};
const page = props.page;
/**
 * @param {*} void
 * @Description: 通知调用者更新数据
 */
const refresh = () => {
  const info = {
    per_page: ps.value, //一页展示多少条
    current_page: pn.value, //需要跳转到的页面
  };
  page?.refresh(info);
};

//监听分页信息的变化，然后修改组件内的数据
watch(page, (e) => {
  pn.value = e?.current_page;
  ps.value = e?.per_page;
  total.value = e?.total;
});
</script>

<style lang="less">
.paginate {
  padding: 30px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  // 此处修改了导航默认样式
  *~.el-pagination__sizes {
    margin-left: 15px;
  }

  *~.el-pagination__jump {
    margin-left: 0px;
  }

  *~.el-pager {
    >.number {
      //选中样式
      border: 1px solid #e6e6e6;
    }

    >.active {
      // 选中的时候取消边框
      border: inherit;
    }
  }

  >.right-tips {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #999999;
  }
}
</style>
